<!DOCTYPE html>
<html>
<head>
    <title>欢迎使用后台管理系统</title>
    <meta charset="utf-8">
    <%- include ../default.html%>
    <link href="/public/css/main.css" rel="stylesheet" type="text/css"/>
    <link href="/public/core/treeSelect/vue-treeselect.min.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<%- include header.html%>
<section>
    <%- include menu.html%>
    <aside class="content" id="content">
            <template>
                <el-table :data="tableData" size="mini" style="width: 100%">
                    <el-table-column prop="menuName" label="菜单名" width="180">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">{{ scope.row.menuName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="url" label="菜单地址" width="180">
                        <template slot-scope="scope">
                            <a href="javascript:;">{{ scope.row.url }}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="email" label="上级菜单">
                        <template slot-scope="scope">
                            <p>{{ scope.row.pMenuName || "ROOT"}}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="菜单描述">
                        <template slot-scope="scope">
                            <p>{{ scope.row.memo }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="operate" label="操作" :render-header="renderHeader" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="editMeunHandler(scope.row.menuId)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteMenuHandler(scope.row.menuId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block repeat-menu-page">
                    <el-pagination  background
                                    :current-page="page.currentPage"
                                    :page-sizes="page.pageSizes"
                                    :page-size="page.pageSize"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="page.total"
                                    @size-change="sizeChangeHandler"
                                    @current-change="currentChangeHandler"
                    >
                    </el-pagination>
                </div>
            </template>

        <!--删除的提示信息-->
        <el-dialog title="提示信息" :visible.sync="dialogVisible" width="30%"  custom-class="api-dialog-tips" v-cloak>
            <span>此操作将永久删除该记录，是否继续？</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="cancelHandler">取 消</el-button>
                <el-button type="primary" @click="deleteHandler" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <!--菜单管理弹窗(新增、删除)-->
        <el-dialog :title="winTitle" :visible.sync="dialogMenWinVisible"  custom-class="api-dialog-tips" width="50%" :close-on-click-modal="false" v-cloak>
            <el-form label-position="labelPosition" label-width="80px" :rules="rules" :model="menu" ref="menu">
                <el-form-item label="菜单名称" prop="menuName">
                    <el-input  auto-complete="off" v-model="menu.menuName"></el-input>
                </el-form-item>
                <el-form-item label="菜单地址">
                    <el-input placeholder="请输入内容" v-model="menu.url">
                        <template slot="prepend" style="padding: 0px 10px;">/admin/</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="上级菜单" prop="pId">
                    <template>
                        <treeselect
                                v-model="menu.pId"
                                :multiple="false"
                                :options="options"
                                :show-count="true"
                        ></treeselect>
                    </template>
                </el-form-item>
                <el-form-item label="菜单描述">
                    <el-input type="textarea" v-model="menu.memo"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeMenuWinHandler">取 消</el-button>
                <el-button type="primary" @click="submitMenuHandler('menu')">确 定</el-button>
            </div>
        </el-dialog>
    </aside>
</section>
</body>
</html>
<script src="/public/js/main.js"> </script>
<script src="/public/core/treeSelect/vue-treeselect.min.js"> </script>
<script src="/public/js/menuManage.js"></script>